<template>
  <div class="main">
    <div class="rightbox1">
      <div class="yqkc">
        <div class="title">摄像头覆盖</div>
        <div class="sxtnum">
          <div
            class="sxtlist"
            style="border-right: 1px solid #ffffff; padding-left: 20px"
          >
            <div class="scttile">摄像头总数</div>
            <div class="scnum">1560</div>
          </div>
          <div class="sxtlist" style="padding-left: 52px">
            <div class="scttile">故障数</div>
            <div class="scnum" style="color: #ff7d4a">
              7
              <div class="gzfb">故障分布</div>
            </div>
          </div>
        </div>
        <div class="sxtzs">
          <div class="sxtztitle">菠萝的海景区摄像头</div>
          <div class="sxtznum">{{ ((1 * 66) % 30) + 300 }}</div>
        </div>
        <div class="sxtzs">
          <div class="sxtztitle">徐闻古巷景区摄像头</div>
          <div class="sxtznum">{{ ((2 * 66) % 30) + 300 }}</div>
        </div>
        <div class="sxtzs">
          <div class="sxtztitle">白沙湾景区摄像头</div>
          <div class="sxtznum">{{ ((3 * 66) % 30) + 300 }}</div>
        </div>
        <div class="sxtzs">
          <div class="sxtztitle">登云塔景区摄像头</div>
          <div class="sxtznum">{{ ((4 * 66) % 30) + 300 }}</div>
        </div>
        <div class="sxtzs">
          <div class="sxtztitle">徐闻博物馆景区摄像头</div>
          <div class="sxtznum">{{ ((5 * 66) % 30) + 300 }}</div>
        </div>
        <div class="qyxl">
          <span>区域:</span>
          <el-select style="margin-left: 27px; width: 180px"></el-select>
        </div>
        <div class="qylist" style="width: 390px">
          <div v-for="item in 6" class="qyitem1">
            <div class="qyimg">
              <img src="../../../assets/aqjk/omage.png" alt="" />
            </div>
            <div class="qytitlr">{{ "停车场" + item }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.el-input__inner {
  border: 1px solid #fff;
  background: #000;
  color: #fff;
}
</style>
<script>
import * as echarts from "echarts";
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
export default {
  components: {},
  watch: {},
  created() {},
  data() {
    return {
      curr: 0,
      dqindex: 0,
      value1: "",
      dataliest: ["日", "月", "年"],
      seriesData: [
        { name: "徐闻交通", value: 11 },
        { name: "交通", value: 3 },
        { name: "住宿", value: 3 },
        { name: "服务", value: 3 },
      ],
      wordChart: {},
      cur: 2,
    };
  },
  mounted() {
    this.getdata2();
    this.getdata3();
  },
  methods: {
    getdata3() {
      const chartDom = document.getElementById("yqpie");
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: false,
        },
        series: [
          {
            type: "pie",
            radius: ["70%", "90%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "center",
              color: "#4af3ff",
              textStyle: {
                fontSize: 25, // 字体大小
                lineHeight: 60, // 行高设置为30px
              },

              fontWeight: "bold",
              formatter: function (e) {
                return `15%`;
              },
            },

            labelLine: {
              show: false,
            },
            color: ["#616a5c", "#1ae8c6"],
            data: [
              { value: 1048, name: "总数" },
              { value: 735, name: "未处理" },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
    dqpm(index) {
      this.dqindex = index;
    },
    getdata2() {
      const chartDom = document.getElementById("qjchart");
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00"],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            lineStyle: {
              color: "#0695a7",
              width: 1,
              type: "solid",
            },
            symbol: "none",
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#09aac2", // 起始颜色
                },
                {
                  offset: 1,
                  color: "#000", // 结束颜色
                },
              ]),
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    djqjl(index) {
      this.curr = index;
      this.getdata2();
    },

    xzx(index) {
      this.cur = index;
    },
  },
};
</script>

<style scoped>
.qyxl {
  margin-top: 37px;
  color: #fff;
  text-align: right;
}
.sxtzs:last-child {
  border-bottom: none !important;
}
.sxtznum {
  font-size: 20px;
  color: #e17143;
}
.sxtztitle {
  font-size: 16px;
  color: #ffff;
}
.sxtzs {
  width: 100%;
  height: auto;
  padding-bottom: 8px;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px dashed #535a53;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}
.gzfb {
  width: 70px;
  height: 25px;
  color: #fff;
  text-align: center;
  display: inline-block;
  font-size: 12px !important;
  line-height: 25px;
  background: #1f8e8c !important;
  border: 1px solid #2ca5a8;
  border-radius: 5px;
}
.scnum {
  font-size: 50px;
  color: #4af3ff;
  text-align: left;
  font-weight: bold;
  /* margin-top: 10px; */
}
.scttile {
  text-align: left;
  color: #fff;
  font-size: 14px;
}
.sxtlist {
  float: left;
  width: 49%;
  height: 100%;
  box-sizing: border-box;
}
.sxtnum {
  width: 100%;
  margin-top: 29px;
  height: 108px;
  padding: 15px 0px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #0e635c;
  overflow: hidden;
}
.rightbox1 {
  float: right;
  width: 420px;
}
.yjyatree {
  width: 100%;
  height: 459px;
  border: 1px dashed #235a5d;
  border-radius: 10px;
  margin-top: 30px;
}
.qjwprc {
  background: #131e12;
  margin-top: 10px;
  height: 171px;
  border-radius: 10px;
  width: 100%;
}
.jqtitle {
  font-size: 20px;
  text-align: left;
  color: #eff0ef;
  margin-top: 20px;
}
.yqtitle {
  font-size: 20px;
  text-align: center;
  color: #eff0ef;
}
.yqpie {
  width: 100%;
  height: 100px;
}
.yqpxlb {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-around;
}
.yqxlln {
  width: 33.3%;
  height: auto;
}
.yqkc {
  width: 420px;

  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}
.hzsb {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 80px;
  background: #ff9c3b;
  border-radius: 10px;
  color: #fff;
  line-height: 30px;
  text-align: center;
  height: 30px;
}
.spsj {
  position: absolute;
  top: 15px;
  width: 310px;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  box-sizing: border-box;
  text-align: left;
  color: #fff;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
}
.cha {
  position: absolute;
  top: 15px;
  right: 10px;
  width: 42px;
  height: 42px;
  line-height: 40px;

  box-sizing: border-box;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
}
.pmm img {
  width: 100%;
  height: 100%;
}
.pmm:nth-child(2n) {
  margin-right: 0px !important;
}
.pmm {
  width: 606px;
  height: 410px;
  float: left;
  margin-bottom: 10px;
  margin-right: 10px;
  position: relative;
}
.pmlist {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.czdqpm {
  width: 122px;
  height: 23px;
  color: #fff;
  text-align: center;
  line-height: 23px;
  border: 1px solid #36d2c2;
  border-radius: 5px;
  margin-right: 23px;
  float: left;
  font-size: 12px;
}
.czdqpm1 {
  width: 160px;
  height: 23px;
  color: #fff;
  text-align: center;
  line-height: 23px;
  border: 1px solid #f45e57;
  border-radius: 5px;
  float: left;
  font-size: 12px;
}
.acdq {
  background: #3aa2ad !important;
  color: #fff !important;
  border: 1px solid #3aa2ad !important;
}
.fptab {
  width: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fpftab {
  text-align: center;
  height: 50px;
  cursor: pointer;
  line-height: 50px;
  border-top-left-radius: 10px;
  border-top-right-radius: 30px;
  border: 1px solid #fff;
  float: left;
  color: #fff;
  padding: 0px 40px;
  box-sizing: border-box;
}
.cbmpright {
  float: left;
  padding-left: 40px;
  box-sizing: border-box;
}
.qytitlr {
  margin-top: 10px;
  color: #fff;
  text-align: center;
}
.qyimg img {
  width: 100%;
  height: 100%;
}
.qyimg {
  width: 100%;
  height: 120px;
  border-radius: 10px;
}
.qyitem:nth-child(3n) {
  margin-right: 0px !important;
}
.qyitem {
  float: left;
  margin-right: 10px;
  width: 190px;
  margin-bottom: 12px;
}
.qyitem1:nth-child(2n) {
  margin-right: 0px !important;
}
.qyitem1 {
  float: left;
  margin-right: 10px;
  width: 190px;
  margin-bottom: 12px;
}
.qylist {
  margin-top: 16px;
  overflow: hidden;
  width: 590px;
}
.jfselect span {
  margin-right: 10px;
}
.jfselect {
  margin-top: 20px;
  color: #fff;
}
.jkleftsx {
  color: #fff;
  font-size: 20px;
}
.cbmpleft {
  float: left;
  padding-right: 38px;
  box-sizing: border-box;
  border-right: 1px dashed #4af3ff;
}
.cbmq {
  width: 100%;
  height: auto;
  padding-top: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.jkxq {
  color: #42c1ba;
  font-size: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #42c1ba;
}
#qjchart {
  width: 100%;
  height: 300px;
}
.qjchart {
  padding-top: 10px;
  box-sizing: border-box;
}
.qjtime div {
  color: #fff;
}
.qjtime {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accur {
}
.jqll img {
  vertical-align: middle;
  margin-right: 0px;
}
.jqll {
  color: #fff;
}
.drkll span {
  color: #4af3ff !important;
}
.drkll {
  color: #fff;
}
.accur .qjtitle {
  background: #226652 !important;
  border-bottom: 1px solid #4af3ff;
}
.qjtitle {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  box-sizing: border-box;
}
.jqlllist {
  cursor: pointer;
}
.jqlllist:nth-child(2n) .qjtitle {
  background: #143524;
}
.tableColum4 {
  margin: 0 auto;
  width: 375px;
  height: 42px;
  border: 0px !important;
  font-size: 13px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #ffffff;
  line-height: 42px;
  border: 0px;
}
.tableColumn3 {
  margin: 0 auto;
  width: 375px;
  height: 42px;
  background: rgba(67, 215, 181, 0.1);
  border: 0px !important;
  font-size: 13px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #ffffff;
  line-height: 42px;
}
.pieinfo {
  float: left;
  width: calc(100% - 171px);
  padding-top: 20px;
  box-sizing: border-box;
}
.pieinfo {
}
.pielist {
  margin-bottom: 11px;
  color: #ffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pielist span {
  font-size: 20px;
  font-weight: bold;

  margin-right: 5px;
}

.peiall {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.ac {
  color: #fff !important;

  background: #0091fe !important;
}
.datelist {
  float: right;
  cursor: pointer;
  width: 33px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  color: #0370be;
  border: 1px solid #0370be;
}
.xstsdate {
  margin-top: 20px;
  overflow: hidden;
}
.xsts {
  margin-top: 22px;
  text-align: left;
  color: #fff;
  font-size: 20px;
}
.jqxq {
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  line-height: 6px;
  height: 25px;
  margin-left: 22px;
  display: inline-block;
  cursor: pointer;
  border-radius: 5px;
  width: auto;
  background: #2a63e5;
}
.tableColumn {
  margin: 0 auto;
  width: 375px;
  height: 42px;
  /* border-radius: 8px; */
  font-size: 13px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #ffffff;
  border-bottom: 1px solid #0e785c;

  line-height: 42px;
}
.tableColumn2 {
  margin: 0 auto;
  width: 375px;
  height: 42px;
  /* background: rgba(67, 215, 181, 0.1); */
  border-bottom: 1px solid #0e785c;
  text-align: center;
  /* border-radius: 8px; */
  font-size: 13px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #ffffff;
  line-height: 42px;
}
.table {
  width: 375px;
  height: 42px;
  background: rgba(67, 215, 181, 0.5);
  border-radius: 8px;
  margin: 0 auto;
  font-size: 13px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #ffffff;
  line-height: 42px;
}
.tableTr {
  display: inline-block;
  width: 20%;
  text-align: center;
}
.main {
  position: absolute;
  right: 22px;
  top: 90px;
  width: 420px;
}
.leftBxo {
  /* width: 23%;
  display: flex; */
  float: left;
}
.left1aq {
  height: auto;
  width: 420px;
  float: left;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}
.centerBxo {
  width: 1932px;
  float: left;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
  margin-right: 59px;
  margin-left: 80px;
}
.rightBxo {
  float: left;
}
.title {
  font-size: 24px;
  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
  font-weight: 600;
  text-align: left;
  font-style: italic;
  color: #ffffff;
}
</style>
